<template>
  <div :class="['info_grid', customClass, styleType]">
    <div class="info_grid_item"
         :style="{flex: `0 0 ${rowPercent}`}"
         v-for="(item, index) in items"
         :key="index">
      <div
        class="info_grid_label"
        :style="`flex: 0 0 ${labelWidth}`">
        <template v-if="item.label!==''">{{item.label}}：</template>
      </div>
      <div class="info_grid_txt">
        <!--任务号专用-->
        <span v-if="item.type === 'taskNumber'">{{infoData[item.value] || 0}}/{{infoData[item.value1] || 0}}</span>
        <span v-else-if="item.selfKeywords">{{infoData[item.value] ? item.keywords[0] : item.keywords[1]}}</span>
        <mes-cell-comp
          v-else
          :column="getColumn(item)"
          :colConfig="item.colConfig"
          :row="infoData"
        ></mes-cell-comp>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'InfoGrid',
  props: {
    // 样式类型，primary 和 grey
    styleType: {
      type: String,
      default: 'primary'
    },
    // 传入的数据对象
    infoData: {
      type: Object,
      default() {
        return {}
      }
    },
    // 循环的项
    items: {
      type: Array,
      default() {
        return []
      }
    },
    // 自定义class
    customClass: {
      type: String,
      default: ''
    },
    labelWidth: {
      type: String,
      default: '40%'
    },
    // 每行个数
    rowSize: {
      type: Number,
      default: 1
    },
  },
  computed: {
    rowPercent() {
      return (100 / this.rowSize).toFixed(4) + '%'
    }
  },
  methods: {
    getColumn(item) {
      return {label: item.label, prop: item.value}
    }
  }
}
</script>

<style lang="less">
  @bor: 1px solid #b2e8ff;
  @bor2: 1px solid #dbe1e8;
  .info_grid {
    &.primary{
      border-top: @bor;
      border-left: @bor;
      .info_grid_item{
        border-bottom: @bor;
        border-right: @bor;
        .info_grid_label{
          border-right: @bor;
          color: #0e68b0;
          background-color: #f0f8ff;
        }
      }
    }
    &.grey{
      border-top: @bor2;
      border-left: @bor2;
      .info_grid_item{
        border-bottom: @bor2;
        border-right: @bor2;
        .info_grid_label{
          border-right: @bor2;
          color: #000;
          background-color: #ebf0f6;
        }
      }
    }
    display: flex;
    flex-wrap: wrap;
    box-sizing: border-box;
    .info_grid_item {
      display: flex;
      line-height: 40px;
      font-size: 14px;
      color: #333;
      box-sizing: border-box;
      .info_grid_label {
        text-align: right;
        /*padding-right: 10px;*/
        box-sizing: border-box;
      }
      .info_grid_txt {
        flex: 1;
        display: flex;
        align-items: center;
        padding: 0 5px;
        box-sizing: border-box;
        line-height: 1.2;
        &.more {
          line-height: 1;
          padding: 10px;
          overflow: hidden;
          word-break: break-all;
          text-overflow: ellipsis;
          -webkit-line-clamp: 3;
          /* ! autoprefixer: off */
          -webkit-box-orient: vertical;
          /* autoprefixer: on */
        }
      }
    }
    .block_label_color{
      min-width: 68px!important;
    }
  }
</style>
